<template>
  <div class="composition-left">
    <div class="tooltip"></div>
  </div>
</template>
<script>
import RadialStackbar from "../../charts/radialStackbar";
import { mapGetters } from "vuex";

export default {
  name: "AppCompositionLeft",
  watch: {
    left() {
      RadialStackbar.update();
    },
    right() {
      RadialStackbar.update();
    },
    radialStackbarData() {
      RadialStackbar.update(this.radialStackbarData);
    }
  },
  mounted() {
    RadialStackbar.init({
      target: ".composition-left",
      margin: { top: 20, right: 20, bottom: 20, left: 20 }
    });
  },
  computed: {
    ...mapGetters({
      left: "layout/getShowLeft",
      right: "layout/getShowRight",
      radialStackbarData: "api/getRadialStackbar"
    })
  }
};
</script>
<style>
.composition-left {
  height: 100%;
}
</style>

